<template>
  <div class="app-container">
    <el-form ref="formData" :inline="true" :model="formData" class="demo-form-inline">
      <el-form-item label prop="smsTitle">
        <el-input v-model="formData.smsTitle" placeholder="任务类型" />
      </el-form-item>
      <el-form-item label prop="status">
        <el-select v-model="formData.status" placeholder="状态">
          <el-option label="1" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label prop="sendUserName">
        <el-input v-model="formData.sendUserName" placeholder="创建人" />
      </el-form-item>
      <el-form-item label prop="time">
        <el-date-picker
          v-model="formData.time"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-button type="primary" @click="addClick">新增</el-button>
      <el-button type="primary" @click="batchDelete">批量删除</el-button>
      <div class="btns">
        <el-button type plain @click="searchClick">搜索</el-button>
        <el-button type plain @click="resetSearch">重置</el-button>
      </div>
    </el-form>

    <el-table :data="tableData" stripe :default-sort="{prop: 'sortable'}" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="taskModelName" label="任务类型" width="180" />
      <el-table-column prop="taskModelCount" label="关联模版数" sortable width="180" />
      <el-table-column prop="sort" label="排序" />
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tooltip :content="'Switch value: '" placement="top">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
            />
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="createUserName" label="创建人" />
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <div>
            {{ scope.row.createTime | formatTime('{y}-{m}-{d} {h}:{i}') }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" width="120" align="center">
        <template>
          <div>
            <el-button type="text" icon="el-icon-edit" size="small" />
            <el-button type="text" icon="el-icon-delete" size="small" />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination ref="pagination" />

    <!-- 弹窗 -->
    <dialogedit :close.sync="diaclose" />
  </div>
</template>
<script>
const formData = {
  appCode: 'TY',
  smsTitle: '',
  status: '',
  sendUserName: '',
  time: ''
}
import pagination from '@/components/pagination'
import { pickerOptions } from '@/utils'
import { getTaskTypeList } from '@/api/task/taskModel'
import dialogedit from './edit'
export default {
  components: { pagination, dialogedit },
  data() {
    return {
      pickerOptions: pickerOptions,
      formData: Object.assign({}, formData),
      multipleSelection: [],
      searchData: {},
      tableData: [],
      diaclose: false
    }
  },
  methods: {
    addClick() {
      this.diaclose = true
    },
    // 重置搜索
    resetSearch() {
      this.$refs['formData'].resetFields()
      this.searchData = Object.assign({}, formData)
      this.$refs.pagination.getData()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    batchDelete() {
      if (this.multipleSelection.length !== 0) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      } else {
        this.$message.warning('请选择删除项！')
      }
    },
    searchClick() {
      this.searchData = Object.assign({}, this.formData)
      this.$refs.pagination.getData()
    },
    search() {
      const params = {
        ...this.$refs.pagination.pageData,
        ...this.searchData,
        appCode: 'TY'
      }
      return new Promise(resolve => {
        getTaskTypeList(params).then(res => {
          this.listLoading = false
          this.tableData = res.data.list
          this.dictMap = res.dictMap || {}
          resolve(res.data)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  .btns {
    float: right;
  }
}
</style>

